<template>
  <uv-button 
    class="ai-button" 
    type="primary" 
    :size="size"
    :custom-style="buttonStyle"
    @click="handleClick"
  >
    {{ text }}
  </uv-button>
</template>

<script>
export default {
  name: 'AIButton',
  props: {
    text: {
      type: String,
      default: '',
    },
    size: {
      type: String,
      default: 'small',
    }
  },
  computed: {
    buttonStyle() {
      return {
        backgroundColor: '#F8F9FA',
        borderColor: '#F8F9FA',
        color: '#495057',
        borderRadius: '20rpx',
        fontSize: this.size === 'mini' ? '24rpx' : '28rpx',
        padding: this.size === 'mini' ? '8rpx 16rpx' : '12rpx 24rpx',
        marginRight: '16rpx',
        flexShrink: 0
      }
    }
  },
  data() {
    return {}
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
.ai-button {
  flex-shrink: 0;
  white-space: nowrap;
}

:deep(.uv-button) {
  &.uv-button--primary {
    background-color: #F8F9FA !important;
    border-color: #F8F9FA !important;
    color: #495057 !important;
    
    &:active {
      background-color: #e9ecef !important;
      border-color: #e9ecef !important;
    }
  }
}
</style>
